:root {
    --sl-color-text-accent: #59a9ee;
    --sl-logo-brightness: brightness(100%)
}

:root[data-theme='light'] {
    --sl-color-text-accent: #59a9ee;
    --sl-logo-brightness: brightness(0%)
}

.site-title {
    gap: 5px;
}

select {
    outline: none;
}

.center-image {
    display: flex;
    justify-content: center;
}

.codemask {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 3rem !important;
}

.codemask .brought {
    font-size: 12px;
    color: var(--sl-color-gray-3);
}

.codemask a {
    margin: 15px 0;
    display: block;
}

.codemask img {
    filter: var(--sl-logo-brightness);
}


.codemask .codemask-description {
    font-size: 14px;
    line-height: 24px;
    color: var(--sl-color-gray-2);
}

main .hero {
    padding-bottom: 0;
    padding-top: 20px;
}

.expressive-code figure pre,
.expressive-code figure pre > code div {
    margin-top: 0;
}
